<div *ngIf="rendered" class="widget stats-widget" ngClass.xs="double-height xs">
  <div class="card-container  front">
    <mat-card class="front" fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between stretch">
      <mat-card-content>
        <mat-toolbar-row >
          <!-- Mobile Only: Exit widget -->
          <button *ngIf="screenType == 'Mobile'" class="mat-card-title-text" mat-icon-button color="default"
            ix-auto ix-auto-type="button" ix-auto-identifier="goBack" >
            <mat-icon (click)="goBack()" class="back-arrow">chevron_left</mat-icon>
          </button>&nbsp;&nbsp;
          <h3 class="mat-card-title-text"><div class="card-title-text">{{title | translate}}</div></h3>

            <div class="controls">
              <button mat-icon-button class="" (click)="router.navigate(['reportsdashboard/cpu'])"
                ix-auto ix-auto-type="button" ix-auto-identifier="cpuReports">
                <mat-icon role="img"
                  matTooltip="CPU Reports"
                  matTooltipPosition="above"
                  aria-label="CPU Reports">
                    insert_chart
                </mat-icon>
              </button>
            </div>
        </mat-toolbar-row>

          <div *ngIf="screenType == 'Desktop'" class="cpu-model top">{{cpuModel ? cpuModel : 'Unknown CPU' | translate}}</div>
          
          <!-- Chart -->
          <div [ngClass]="{'mobile': screenType == 'Mobile'}" id="cpu-load-wrapper" fxLayout="row wrap" fxLayoutAlign="space-around center">

            <div class="viewchartgauge" fxFlex="47" fxFlex.xs="100">
              <viewchartgauge [config]="cpuAvg" #load *ngIf="cpuAvg && cpuAvg.data; else loader"></viewchartgauge>
            </div>

            <ng-template #loader>
              <mat-spinner [diameter]="40" style="margin: 0 auto;"></mat-spinner>
            </ng-template>

            <div *ngIf="screenType == 'Desktop'" fxFlex="53" fxFlex.xs="100" id="cpu-load-cores">
                <mat-list>
                  <mat-list-item>
                    <span class="label"><strong>{{"Threads" | translate}}:</strong></span> &nbsp;&nbsp;{{coreCount}} {{"threads" | translate}}
                  </mat-list-item>
                  <mat-list-item>
                    <div class="label-icon" *ngIf="usageMax >= 70" [ngClass]="{'warn': usageMax < 90, 'danger': usageMax > 89 }">
                      <mat-icon fontSet="mdi-set" fontIcon="mdi-alert" role="img"></mat-icon>
                    </div>
                    <span class="label"><strong>{{"Highest Usage" | translate}}:</strong></span> &nbsp;&nbsp;{{usageMax}}% &nbsp;
                    <span class="subtext" >({{usageMaxThreads.length < 2 ? 'Thread #' + usageMaxThreads.toString(): usageMaxThreads.length + ' threads at ' + usageMax + '%'}})</span>
                  </mat-list-item>
                  <mat-list-item>
                    <div class="label-icon" *ngIf="tempMax >= 70" [ngClass]="{'warn': tempMax < 80, 'danger': tempMax > 79 }">
                      <mat-icon fontSet="mdi-set" fontIcon="mdi-alert" role="img"></mat-icon>
                    </div>
                    <span class="label"><strong>{{"Hottest" | translate}}:</strong></span> &nbsp;&nbsp;
                    <ng-container *ngIf="tempAvailable == 'true'; else notemps">
                      <span>{{tempMax}}°C &nbsp;</span>
                      <span class="subtext">({{tempMaxThreads.length < 2 ? 'Thread #' + tempMaxThreads.toString(): tempMaxThreads.length + ' threads at ' + tempMax + '°C'}})</span>
                    </ng-container>
                    <ng-template #notemps>
                      {{"Data not provided" | translate}}
                    </ng-template>

                  </mat-list-item>
                </mat-list>
            </div>

          </div>


        <div *ngIf="screenType == 'Mobile'" fxLayout="column" class="mobile" >
          <div fxFlex="65" class="bottom">
            <div class="list-subheader">  <span class="capitalize">{{"CPU Details" | translate}}</span></div>
            <mat-list>
              <mat-list-item><span class="label">{{"Model:" | translate}}</span> &nbsp;&nbsp;{{cpuModel ? cpuModel : 'Unknown CPU'}}</mat-list-item>
              <mat-list-item><span class="label">{{"Threads:" | translate}}</span> &nbsp;&nbsp;{{coreCount}}</mat-list-item>
            </mat-list>
          </div>
        </div>


        <div *ngIf="screenType == 'Mobile'" fxLayout="column" class="mobile" >
          <div fxFlex="65" class="bottom">
            <div class="list-subheader">  <span class="capitalize">{{"Stats Per Thread" | translate}}</span></div>
            <mat-list>
              <ng-container *ngIf="tempAvailable == 'true';">
                <mat-list-item>
                  <span class="label">{{"Hottest:" | translate}}</span> &nbsp;&nbsp;{{tempMax}}°C &nbsp;&nbsp;
                  <span class="subtext">({{tempMaxThreads.length < 2 ? 'Thread #' + tempMaxThreads.toString(): tempMaxThreads.length + ' threads at ' + tempMax + '°C'}})</span>
                </mat-list-item>
                <mat-list-item>
                  <span class="label">{{"Coolest:" | translate}}</span> &nbsp;&nbsp;{{tempMin}}°C &nbsp;&nbsp;
                  <span class="subtext" >({{tempMinThreads.length < 2 ? 'Thread #' + tempMinThreads.toString() : tempMinThreads.length + ' threads at ' + tempMin + '°C'}})</span>
                </mat-list-item>
              </ng-container>
              <mat-list-item>
                <span class="label">{{"Highest Usage:" | translate}}</span> &nbsp;&nbsp;{{usageMax}}% &nbsp;&nbsp;
                <span class="subtext" >({{usageMaxThreads.length < 2 ? 'Thread #' + usageMaxThreads.toString(): usageMaxThreads.length + ' threads at ' + usageMax + '%'}})</span>
              </mat-list-item>
              <mat-list-item>
                <span class="label">{{"Lowest Usage:" | translate}}</span> &nbsp;&nbsp;{{usageMin}}% &nbsp;&nbsp;
                <span class="subtext" >({{usageMinThreads.length < 2 ? 'Thread #' + usageMinThreads.toString() : usageMinThreads.length + ' threads at ' + usageMin + '%'}})</span>
              </mat-list-item>
            </mat-list>
          </div>
        </div>


        <!-- Start Cores Wrapper -->
          <div id="cpu-cores-wrapper" class="bar-chart-wrapper" fxLayout="column">
              
            <div [ngClass]="{ 'mobile': screenType == 'Desktop'}" fxFlex="100" id="cpu-load-cores-legend" fxLayout="row wrap">
                <div *ngIf="legendData && screenType == 'Desktop'; else noLegend" id="cpu-load-cores-legend-values" fxFlex fxLayout="row wrap" fxLayoutAlign="space-around center">
                  
                  <div *ngIf="screenType == 'Desktop'" fxFlex="26" fxFlex.xs="calc(100% - 16px)" class="legend-item core-number"><span class="label">{{"Thread number:" | translate}}</span> {{legendIndex}}</div>

                  <div fxFlex="22" fxFlex.xs="calc(50% - 16px)" class="legend-item usage">
                    <div class="legend-swatch" style="background-color:var(--primary);"></div><span class="label">{{legendData[0].label}}:</span> {{legendData[0].data[legendIndex]}}%
                  </div>

                  <ng-container *ngIf="tempAvailable == 'true';">
                    <div fxFlex="28" fxFlex.xs="calc(50% - 16px)" *ngIf="legendData[1]" class="legend-item temperature">
                      <div class="legend-swatch" style="background-color: var(--accent)"></div><span class="label">{{legendData[1].label}}:</span> {{legendData[1].data[legendIndex]}}°C
                    </div>
                  </ng-container>
                
                </div>
              </div>
  
              <ng-template #noLegend>
                <div id="cpu-load-cores-legend-values" fxFlex fxLayout="row wrap" fxLayoutAlign="space-around center">
  
                  <div fxFlex="26" fxFlex.xs="calc(100% - 16px)" class="legend-item core-number"><span class="label">{{"Stats Per Thread" | translate}}</span></div>

                  <div fxFlex="22" fxFlex.xs="calc(50% - 16px)" class="legend-item usage">
                    <div class="legend-swatch" style="background-color:var(--primary);"></div><span class="label">{{"Usage" | translate}}</span> 
                  </div>

                  <ng-container *ngIf="tempAvailable == 'true';">
                    <div fxFlex="28" fxFlex.xs="calc(50% - 16px)"  class="legend-item temperature">
                      <div class="legend-swatch" style="background-color: var(--accent)"></div><span class="label">{{"Temperature" | translate}}</span> 
                    </div>
                  </ng-container>
  
                </div>
              </ng-template>
  
            <div fxFlex="104px" id="cpu-cores-chart" class="bar-chart">
              <canvas></canvas>
            </div>
          </div> <!-- End Cores Wrapper -->
        
        <!-- DETAILS -->
      </mat-card-content>
    </mat-card>

  </div>
</div>
